<template>
  <div class="side-navigation">
    <el-menu
      default-active="0"
      class="el-menu-vertical"
      :collapse="isCollapse"
      background-color="#f8f9fa" 
      active-text-color="#f8f9fa"
      @select="handleSelect"
    >
      <!-- 会员中心 -->
      <el-menu-item index="0">
        <i class="el-icon-user colorI"></i>
        <span slot="title">会员中心</span>
      </el-menu-item>

      <!-- 账期中心（带二级菜单） -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-monitor colorI"></i>
          <span>账期中心</span>
        </template>
        <el-menu-item index="1-1">账期首页</el-menu-item>
        <el-menu-item index="1-2">准入申请记录</el-menu-item>
      </el-submenu>

      <!-- 商品管理 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-goods colorI"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item index="2-1">我的收藏夹</el-menu-item>
      </el-submenu>

      <!-- 订单管理（带二级菜单） -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-tickets colorI"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item index="3-1">我的订单</el-menu-item>
      </el-submenu>
      <!-- 询单管理 （带二级菜单） -->
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-tickets colorI"></i>
          <span>询单管理</span>
        </template>
        <el-menu-item index="4-1">我的询单</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'SideNavigationMenu',
  data() {
    return {
      isCollapse: false, // 控制菜单折叠
    };
  },
  methods: {
    // 菜单项点击处理
    handleSelect(index) {
      this.$emit('select', index); // 将选中的菜单项传递给父组件
    }
  }
};
</script>

<style scoped>
.side-navigation {
  height: 100vh;
  background: #f8f9fa;
  border-right: 1px solid #e8e8e8;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
  min-height: 100%;
}

.el-menu-item,
.el-submenu__title {
  height: 48px;
  line-height: 48px;
}

.el-submenu .el-menu-item {
  padding-left: 50px !important;
  background-color: #f0f2f5 !important;
}

.el-menu-item.is-active {
  background-color: var(--color-base) !important;
  border-right: 3px solid var(--color-base);
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: var(--color-base) !important; /* 你想要的鼠标滑入颜色 */
  color: #fff; /* 鼠标滑入时的文本颜色 */
}
.el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: var(--color-base); 
}

.el-submenu__icon-arrow {
  color: var(--color-base); 
}

.colorI {
  color: #909399;
}
</style>